import router from './router'
import store from './store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  if (store.getters.token) {
    // 已登录
    // 判断是否还去登录页，如果是，则强制跳转到首页
    if (to.path === '/login') {
      // next 不带任何参数，表示直接放行
      // 如果带上一个路径，则是跳转到相应的页面，跟 router.push用法一样
      next('/')
    } else {
      // 其他情况，放行
      // 这里是确定了用户已经登录，进入的是一个 非登录外的页面，
      // 需要在进入页面之前获取数据，这样能够确保无论进入的是哪个页面，
      // vuex 当中都能获取用户数据，另外如果本来就有已经获取过，
      // 只是从一个页面进入到另一个页面，没必要再次发送请求获取数据
      if (!store.getters.getUserInfo) {
        // 这里获取完数据的位置
        await store.dispatch('user/getUserInfo')
        // ! 这里就可以进行路由筛选和追加
        // 1、拿到所有的动态路由数组
        // 2、拿到这个用户的 menus 数组
        // 进行对照，路由 name存在 menus当中就可访问，否则不行
        // const menus = store.state.user.userInfo.roles.menus
        // const routes = asyncRoutes.filter(item => menus.includes(item.name))

        // 所有的 actions 都是promise 可以根据内部的return接收数据
        const routes = await store.dispatch('permission/filterRouter')
        // 使用一个路由实例的方法 addRoutes 可以追加路由配置, 回复 url 的直接访问(跟菜单无关)
        router.addRoutes([...routes, {
          path: '*',
          redirect: '/404',
          hidden: true
        }])
        // ! 这里刚刚追加完路由, 但是匹配过程是不会自动重新触发, 原来看不见的页面还是看不见
        // ! 需要手动, 相同的地址, 跳转一次, 重新触发匹配流程
        next(to.path)
        return
      }
      next()
    }
  } else {
    // 未登录
    // 设置 白名单 进行区分
    const whileList = ['/login', '/404']
    if (whileList.includes(to.path)) {
      // 存在白名单中，则放行
      next()
    } else {
      // 不存在白名单中，则跳转到登录页
      next('/login')
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

// 后置守卫
router.afterEach(() => {
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})
